<template>
    <div class="app-container">
        <div class="item_box" :style="{height: isExpand ? 'auto' : '80px'}">
            <p class="title_1">概要信息</p>
            <SummaryInfo :custInfo="custInfo"/>
            <hr>
            <p class="title_1">
                非车业务：<span style="color: #3A71A8;">重客</span>
            </p>
            <el-form ref="baseFormRef" class="custom-form" :model="custInfo" label-width="180px">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="总部管理处室" prop="zbglcs">
                            <el-input v-model="custInfo.zbglcs" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="VIP编码" prop="vip">
                            <el-input v-model="custInfo.vip" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="申请分公司" prop="sqfgs">
                            <el-input v-model="custInfo.sqfgs" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="存潜标识" prop="cqbs">
                            <el-input v-model="custInfo.cqbs" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="启信宝认证" prop="qxbrz">
                            <el-input v-model="custInfo.qxbrz" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="客户类别（规模）" prop="khlbgm">
                            <el-select v-model="custInfo.khlbgm" >
                                <el-option v-for="dict in khlbgmOption" :key="dict.value" :label="dict.label" :value="dict.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="客户层级（按业务）" prop="khcjayw">
                            <el-input v-model="custInfo.khcjayw" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="上级机构名称" prop="sjjgmc">
                            <el-input v-model="custInfo.sjjgmc" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="股权一级机构名称" prop="gqyjjgmc">
                            <el-input v-model="custInfo.gqyjjgmc" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <hr>
            <p class="title_1">团车业务</p>
            <el-form class="custom-form" :model="custInfo" label-width="180px">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="客户管理类型" prop="khgllx">
                            <el-input v-model="custInfo.khgllx" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="牵头机构" prop="qtjg">
                            <el-input v-model="custInfo.qtjg" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="统保代码" prop="tbdm">
                            <el-input v-model="custInfo.tbdm" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="重大关联关系" prop="zdglgx">
                            <el-input v-model="custInfo.zdglgx" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="经营地区" prop="jydq">
                            <div class="flex_c" style="width: 100%;">
                                <el-input v-model="custInfo.jydq" />
                                <!-- <el-button type="primary" class="ml10" plain>查看</el-button> -->
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="落地机构" prop="ldjg">
                            <div class="flex_c" style="width: 100%;">
                                <el-input v-model="custInfo.ldjg" />
                                <!-- <el-button type="primary" class="ml10" plain>查看</el-button> -->
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="车辆使用性质（商业险）" prop="clsyxzsyx">
                            <div class="flex_c" style="width: 100%;">
                                <el-input v-model="custInfo.clsyxzsyx" style="width: 70%;" />
                                <!-- <el-button type="primary" class="ml10" plain>查看</el-button> -->
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="车辆使用性质（交强险）" prop="clsyxzjqx">
                            <div class="flex_c" style="width: 100%;">
                                <el-input v-model="custInfo.clsyxzjqx" style="width: 70%;" />
                                <!-- <el-button type="primary" class="ml10" plain>查看</el-button> -->
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="车辆种类（商业险）" prop="zlzlsyx">
                            <div class="flex_c" style="width: 100%;">
                                <el-input v-model="custInfo.zlzlsyx" style="width: 70%;" />
                                <!-- <el-button type="primary" class="ml10" plain>查看</el-button> -->
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="车辆种类（交强险）" prop="zlzljqx">
                            <div class="flex_c" style="width: 100%;">
                                <el-input v-model="custInfo.zlzljqx" style="width: 70%;" />
                                <!-- <el-button type="primary" class="ml10" plain>查看</el-button> -->
                            </div>
                        </el-form-item>
                    </el-col>
                    
                </el-row>
            </el-form>
            <!-- 展开收起 -->
            <div style="width: 50%;height: 30px"></div>
            <DArrowRight style="width: 1.5em; height: 1.5em; margin-right: 8px; color: #3A71A8;" @click="switchBOx" class="isExpand" :style="{transform: isExpand ? 'rotate(90deg)' : 'rotate(-90deg)'}"/>
        </div>
        <div class="item_box">
            <p class="title_1 mb10">业务联络</p>
            <p class="title_2 mb5">司内联系人</p>
            <p class="item_box_c_title flex_sb">
                <span>业务场景：客户新增、客户信息维护</span>
                <el-button plain type="primary" @click="openSnContactsDialog">新增</el-button>
            </p>
            <div class="item_box_c mb10">
                <el-table :data="snContacts">
                    <el-table-column label="联系人姓名" prop="empName" align="center"/>
                    <el-table-column label="手机" prop="mobilPhone" align="center"/>
                    <el-table-column label="邮箱地址" prop="outEmail" align="center"/>
                    <el-table-column label="部门" prop="empDepartName" align="center"/>
                    <el-table-column label="职位" prop="positionname" align="center"/>
                    <el-table-column label="电话" prop="officePhone" align="center"/>
                    <el-table-column label="传真" prop="fax" align="center"/>
                    <el-table-column label="团队角色" prop="userRole" align="center"/>
                    <el-table-column label="项目职责" prop="userDuty" align="center"/>
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                        <template #default="{ row }">
                            <el-button link type="primary" @click="viewProfile(row)">查看档案</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <p class="title_2 mb5">客户方联系人</p>
            <p class="item_box_c_title flex_sb">
                <span>业务场景：客户新增、客户信息维护</span>
                <el-button plain type="primary" @click="openCustomContactsDialog">新增</el-button>
            </p>
            <div class="item_box_c mb10">
                <el-table :data="custContacts" align="center">
                    <el-table-column label="联系人姓名" prop="linkmanName" align="center"/>
                    <el-table-column label="手机" prop="linkmanMobile" align="center"/>
                    <el-table-column label="邮箱地址" prop="linkmanMail" align="center"/>
                    <el-table-column label="部门" prop="linkmanDept" align="center"/>
                    <el-table-column label="职位" prop="linkmanTitle" align="center"/>
                    <el-table-column label="电话" prop="linkmanPhone" align="center"/>
                    <el-table-column label="传真" prop="linkmanFax" align="center"/>
                </el-table>
            </div>
        </div>
        <div class="item_box">
            <p class="title_1">附加说明</p>
            <el-form class="custom-form" :model="custInfo" label-width="180px">
                <el-form-item label="客户新增理由说明" prop="khxzlysm">
                    <el-input 
                        v-model="custInfo.khxzlysm" 
                        type="textarea" 
                        placeholder="请输入" 
                        maxlength="200" 
                        style="width: 60%"
                        show-word-limit
                    ></el-input>
                </el-form-item>
                <el-form-item label="附件信息" prop="fileIds">
                    <file-upload v-model="custInfo.fileIds" :fileType="['png','jpg','pdf']" ></file-upload>
                </el-form-item>
            </el-form>
        </div>
        <el-row justify="center">
            <el-button @click="cancel" icon="Back" plain type="primary">取消</el-button>
            <el-button @click="submit" icon="Position" type="primary">提交</el-button>
        </el-row>
        <SnContactsDialog v-model:visible="snContactsDialogVisible" @confirm="contactsSelection"/>
        <CustomContactsDialog v-model:visible="customContactsDialogVisible" @confirm="customContactsSelection"/>
    </div>
</template>

<script setup name="Main">
import SummaryInfo from '../components/SummaryInfo.vue'
import SnContactsDialog from '../components/SnContactsDialog.vue'
import CustomContactsDialog from '../components/CustomContactsDialog.vue'
import useCustAddOrEditStore from '@/store/modules/custAddOrEdit'

const router = useRouter()
const { proxy: vm } = getCurrentInstance()
const props = defineProps({
    custId: {
        type: [Number, String],
        default: null,
    }
});
const custInfo = reactive({
    custName: '苏州市轨道交通股份有限公司',
    creditNo: 'OPSHB202408230003',
    updateTime: '2019.10.21',
    address: '上海市徐汇区宜山路700号普天科创园',
    khzt: '有效',
    gslx: '1',
    sshy: '1',
    city: '上海/上海市/徐汇区',
    fddbrmc: '李建军',
    khbm: '苏州市轨道，轨道交通，苏州第一轨道',
    zbglcs: '重客',
    vip: '1234567890',
    sqfgs: '上海分公司',
    cqbs: '存量客户',
    qxbrz: '是',
    khlbgm: '1',
    khcjayw: '重客一级',
    sjjgmc: '',
    gqyjjgmc: '',
    khgllx: '总对总客户',
    qtjg: '上海分公司',
    tbdm: '45678',
    zdglgx: '百大生态圈',
    jydq: '北京、上海、广州、黑龙江、吉林',
    ldjg: '北京分公司、上海分公司',
    clsyxzsyx: '城市公交、租凭车、出租车、...',
    clsyxzjqx: '企业用车、出租租凭车、...',
    zlzlsyx: '6座以下客车、特种车一、...',
    zlzljqx: '6座以下客车、特种车一、...',
    khxzlysm: '此客户为国内500强，重点发展客户，希望领导审批通过。',
    fileIds: ''
})
const khlbgmOption = [{label: '世界500强', value: '1'}]
const snContacts = reactive([
    {
        id: 1,
        empName: '张三',
        mobilPhone: '13212345678',
        outEmail: 'EMAIL',
        empDepartName: '武汉市分公司',
        positionname: '主管',
        officePhone: '6583658745',
        fax: '123123',
        userRole: '牵头人',
        userDuty: '项目经理',
    },
    {
        id: 2,
        empName: '张三',
        mobilPhone: '13212345678',
        outEmail: 'EMAIL',
        empDepartName: '武汉市分公司',
        positionname: '主管',
        officePhone: '6583658745',
        fax: '123123',
        userRole: '牵头人',
        userDuty: '项目经理',
    }
])
const custContacts = reactive([
    {
        id: 1,
        linkmanName: '张三',
        linkmanDept: '技术部',
        linkmanTitle: '技术工程师',
        linkmanMobile: '13800138000',
        linkmanMail: '237239@163.com',
        linkmanPhone: '0571-88888888',
        linkmanFax: '2938572948',
    },
    {
        id: 2,
        linkmanName: '张三',
        linkmanDept: '技术部',
        linkmanTitle: '技术工程师',
        linkmanMobile: '13800138000',
        linkmanMail: '237239@163.com',
        linkmanPhone: '0571-88888888',
        linkmanFax: '2938572948',
    },
    {
        id: 3,
        linkmanName: '张三',
        linkmanDept: '技术部',
        linkmanTitle: '技术工程师',
        linkmanMobile: '13800138000',
        linkmanMail: '237239@163.com',
        linkmanPhone: '0571-88888888',
        linkmanFax: '2938572948',
    },
])
const fileList = [{name: '上海XX建筑工程有限公司介绍.pdf'}]
const viewProfile = (row) => {
    console.log('row', toRaw(row))
}

// 提交
const baseFormRef = ref(null)
const submit = () => {
    baseFormRef.value.validate(valid => {
        if(!valid){
            vm.$modal.msgWarning("请完善表单信息");
        } else {
            vm.$modal.msgSuccess("提交成功");
            cancel()
        }
    })
}
const cancel = () => {
    useCustAddOrEditStore().$reset()
    vm.$tab.closeOpenPage()
    router.back()
}

// 新增司内联系人
let snContactsDialogVisible = ref(false)
const openSnContactsDialog = ()=>{
    snContactsDialogVisible.value = true
}
const contactsSelection = (arr)=>{
    console.log(arr)
}
// 新增客户联系人
let customContactsDialogVisible = ref(false)
const openCustomContactsDialog = ()=>{
    customContactsDialogVisible.value = true
}
const customContactsSelection = (arr)=>{
    console.log(arr)
}

// 关闭收起
const isExpand = ref(true)
function switchBOx(){
    isExpand.value = !isExpand.value
}
</script>

<style lang="scss" scoped>
.item_box{
    overflow: hidden;
    position: relative;
    transition: all .5s;
    .isExpand{
        position: absolute;
        bottom: 10px;
        right: 20px;
    }
}
</style>